<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>从集群删除节点</title>
    <script>

        $(function () {

            //toastr.warning("请先从下拉框中选择一个集群！");

            $.post("${ctx}/redis-api/getClusters", {}, function(data) {
                if (data.success){
                    var clusters = data.result;
                    var clusterList = $('#cluster-list');
                    for (var i in clusters){
                        //$('#cluster-list').append('<li><a href="javascript:selectCluster('+clusters[i].id+',\''+clusters[i].clusterName+'\')"><i class="icon-code-fork"></i>'+clusters[i].clusterName+'</a></li>');
                        clusterList.append('<option value="'+clusters[i].id+'">'+clusters[i].clusterName+'</option>');
                    }

                    clusterList.selectpicker({
                        //liveSearch: true,
                        //maxOptions: 1,
                        //title:"请选择集群",
                        width:'auto'
                    });
                    clusterList.selectpicker('refresh');
                    clusterList.on('hidden.bs.select', function(){
                        if ($(this).val() != ""){
                            selectCluster($(this).val(), $(this).find("option:selected").text());//$(this).selectpicker('val')
                        }
                    });
                }
            });

        });

        function selectCluster(clusterId, clusterName){
            //$("#clusterName").html(' - ' + clusterName);
            $.post("${ctx}/redis-api/getClusterAndNodesInfo", {clusterId:clusterId}, function(data) {
                if (data.success){
                    var clusterInfo = data.result;
                    var masterNodes = clusterInfo.masterNodes;
                    var nodesData = [];
                    for (var i in masterNodes){
                        var masterNode = masterNodes[i];
                        nodesData.push({
                            nodeId:masterNode.id,
                            masterNode:masterNode.ip+ ":"+masterNode.port,
                            slaveNode:"",
                            nodeState:masterNode.state,
                            slotsNum:masterNode.slots.length
                        });
                        var slaveNodesMap = masterNode.slaveNodesMap;
                        for (var slaveNodeId in slaveNodesMap){
                            var slaveNode = slaveNodesMap[slaveNodeId];
                            nodesData.push({
                                nodeId:slaveNode.id,
                                masterNode:"",
                                slaveNode:slaveNode.ip+ ":"+slaveNode.port,
                                nodeState:slaveNode.state,
                                slotsNum:""
                            });
                        }
                    }
                    createNodeTable(nodesData);
                }
            });
        }

        var nodeTable = null;
        function createNodeTable(data){
            if (nodeTable != null){
                nodeTable.bootstrapTable('load', data);
                return;
            }
            nodeTable = $('#nodes-info-table').bootstrapTable({
                uniqueId: "nodeId",
                classes: "table table-no-bordered",
                striped: false,
                singleSelect: false,
                data: data,
                locale: "zh-US" ,
                rowStyle: function(row, index){
                    var css = {};
                    if (row.nodeState != 'CONNECTED'){
                        css = {color:'red'};
                    }
                    if (row.masterNode != ''){
                        return {classes: 'active', css: css};
                    }else{
                        return {classes: '', css: css};
                    };
                },
                columns: [{
                    title: '主节点',
                    field: 'masterNode',
                    align: 'center',
                    valign: 'middle',
                    width: '25%'
                },{
                    title: '从节点',
                    field: 'slaveNode',
                    align: 'center',
                    valign: 'middle',
                    width: '25%'
                },{
                    title: '槽位个数',
                    field: 'slotsNum',
                    align: 'center',
                    valign: 'middle',
                    width: '20%'
                }, {
                    title: '节点状态',
                    field: 'nodeState',
                    align: 'center',
                    valign: 'middle',
                    width: '20%'
                },{
                    title: '操作',
                    field: 'nodeId',
                    align: 'center',
                    valign: 'middle',
                    width: '10%',
                    formatter:function(value, row, index){
                        var html = '<a href="#" mce_href="#" onclick="removeNode(\''+ row.nodeId + '\')">删除</a> ';;
                        return html;
                    }
                }]
            });
        }

        function removeNode(nodeId) {
            var row = nodeTable.bootstrapTable('getRowByUniqueId', nodeId);
            var index = layer.confirm('确认删除节点'+row.masterNode+row.slaveNode+'？', {
                btn: ['确定','取消'], title: '删除确认', icon: 3
            }, function(){
                layer.close(index);
                $.post("${ctx}/redis-api/removeNodeFromCluster", {nodeId:nodeId}, function(data) {
                    if (data.success) {
                        toastr.success("节点删除成功！");
                        selectCluster($('#cluster-list').val());
                    }
                }, "json");
            }, function(){
            });
        }

    </script>
</head>

<body>

<div class="page-title">
    <div class="btn-group pull-right">
        <%--<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">选择集群<span class="caret"></span></button>--%>
        <%--<ul class="dropdown-menu dropdown-menu-right" id="cluster-list">--%>
        <%--</ul>--%>
        <select id="cluster-list" class="selectpicker show-tick" title="请选择集群" data-live-search="true" data-size="5">
        </select>
    </div>
    <h3>从集群删除节点</h3>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="widget-container fluid-height">
            <div class="heading" style="vertical-align: middle">
                <i class="icon-bar-chart"></i><span>节点列表</span><span id="clusterName"></span>
            </div>
            <div class="widget-content padded text-center">
                <table class="table" id="nodes-info-table">
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
